<template>
  <div class="aside">
    <div :class="!isCollapseAside? 'pdtb-5 flex-s-between':'pdtb-5 font-20 flex-n-center'">
      <div v-if="!isCollapseAside" class="flex-left-nowrap">
        <img src="../../assets/icon/screen.svg" alt="">
        <span class="color-f font-20 fontW-b font-f-ib mgl-13">{{$t('title.screen')}}</span>
      </div>
      <div :class="isCollapseAside? '':'pdlr-10'" @click="toggleCollpase">
        <i :class="isCollapseAside? 'el-icon-s-unfold':'el-icon-s-fold'" class="color-f font-20"></i>
      </div>
    </div>
    <div class="menucontent" >
      <Menu :menuList="menuList" :isCollapse="isCollapseAside" v-if="AsideType===0"/>
      <home-menu  :HomeList="menuList" :isCollapse="isCollapseAside"  :menuchecked="menuchecked" @onSelectArr="onSelectArr" :menuType="AsideType" v-if="AsideType===1" :isChecked="isChecked"/>
      <home-menu  :HomeList="Homeitem" :isCollapse="isCollapseAside"  :menuchecked="menuchecked" @onSelectArr="onSelectArr" :menuType="2" v-if="AsideType===1"/>
    </div>
  </div>
</template>
<script>
import HomeMenu from './HomeMenu'
import Menu from './Menu'
export default {
  name: 'asideItem',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    Homeitem: {
      type: Array,
      default: () => []
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    },
    isChecked: {
      type: Boolean,
      default: () => false
    },
    menuchecked: {
      type: Boolean,
      default: () => false
    },
    AsideType: Number
  },
  components: {
    Menu,
    HomeMenu
  },
  data () {
    return {
      isCollapseAside: false,
      selectArr: []
    }
  },
  mounted () {
    // console.log(this.menuList, this.isCollapseAside, this.AsideType)
    this.isCollapseAside = this.isCollapse
  },
  methods: {
    toggleCollpase: function () {
      this.isCollapseAside = !this.isCollapseAside
      this.$emit('getCollapseFlag', this.isCollapseAside)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath, JSON.stringify(key))
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, JSON.stringify(key))
    },
    hundleSelect: function (key, keyPath) {
      console.log(key, keyPath, 'hundleSelect', JSON.stringify(key))
    },
    onSelectArr: function (val) {
      console.log(val, '-------------')
      this.selectArr = val
      this.$emit('onSelectArr', this.selectArr)
    }
  }
}
</script>??.

<style lang="less" scoped>
.aside {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
    }
    /deep/.el-submenu__title:hover {
      background: none;
    }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
}
</style>
